<!DOCTYPE html>
<script src="resources/responsive-test.js"></script>
<script>
function serializeSVGTransformList(transformList) {
  var elements = [];
  for (var index = 0; index < transformList.numberOfItems; ++index) {
    var transform = transformList.getItem(index);
    elements.push(transform.type);
    elements.push(transform.angle);
    elements.push(transform.matrix.a);
    elements.push(transform.matrix.b);
    elements.push(transform.matrix.c);
    elements.push(transform.matrix.d);
    elements.push(transform.matrix.e);
    elements.push(transform.matrix.f);
  }
  return String(elements);
}

assertSVGResponsive({
  targetTag: 'line',
  property: 'transform',
  getter(target) {
    return serializeSVGTransformList(target.transform.animVal);
  },
  from: neutralKeyframe,
  to: 'translate(30 70)',
  configurations: [{
    state: {underlying: 'translate(10 10)'},
    expect: [
      {at: 0.25, is: 'translate(15 25)'},
      {at: 0.75, is: 'translate(25 55)'},
    ],
  }, {
    state: {underlying: 'translate(20 30) skewX(10)'},
    expect: [
      {at: 0.25, is: 'translate(20 30) skewX(10)'},
      {at: 0.75, is: 'translate(30 70)'},
    ],
  }],
});
</script>
